<template>
	<view class="yxyl-common-container">
		<view class="yxyl-common-101" v-if="type == 7" @tap="routeHandler(rowData[0].targetInfo)">
			<!-- 左图右字 -->
			<view class="yxyl-common-image yxyl-common-101-image"><image v-if="rowData[0]" :lazy-load="true" class="image" :src="rowData[0].image" mode="widthFix"></image></view>
			<view class="yxyl-common-101-text">
				<rich-text :nodes="title_nodes[0]" class="title"></rich-text>
				<rich-text :nodes="remark_nodes[0]" class="remark"></rich-text>
			</view>
		</view>
		<!-- 视频 -->
		<view class="yxyl-common-109" v-if="type == 2" @tap="routeHandler(rowData[0].targetInfo)">
			<view class="yxyl-common-image yxyl-common-109-image"><video class="video" :src="rowData[0].targetInfo.targetSrc" controls="true" 
			:poster="rowData[0].image"></video></view>
			<view class="yxyl-common-109-text"><rich-text class="title" :nodes="title_nodes[0]"></rich-text></view>
		</view>
		<view class="yxyl-common-102" v-else-if="type == 3" @tap="routeHandler(rowData[0].targetInfo)">
			<!-- 通栏 -->
			<view class="yxyl-common-image yxyl-common-102-image"><image v-if="rowData[0]" :lazy-load="true" class="image" :src="rowData[0].image" mode="widthFix"></image></view>
		</view>
		<view class="yxyl-common-103" v-else-if="type == 1" @tap="routeHandler(rowData[0].targetInfo)">
			<!-- 标题 -->
			<view class="yxyl-common-103-text">
				<rich-text :nodes="title_nodes[0]" class="title"></rich-text>
				<rich-text :nodes="remark_nodes[0]" class="remark" @tap="tapHandler"></rich-text>
			</view>
		</view>
		<view class="yxyl-common-104" v-else-if="type == 104" @tap="routeHandler(rowData[0].targetInfo)">
			<!-- 上图下字 -->
			<view class="yxyl-common-image yxyl-common-104-image"><image v-if="rowData[0]" :lazy-load="true" class="image" :src="rowData[0].image" mode="widthFix"></image></view>
			<view class="yxyl-common-104-text"><rich-text :nodes="title_nodes[0]" class="title"></rich-text></view>
		</view>
		<view class="yxyl-common-105" v-else-if="type == 4">
			<!-- 并列两图 -->
			<view class="yxyl-common-105-item" v-for="(item, index) in rowData" :key="index" @tap="routeHandler(item.targetInfo)">
				<view class="yxyl-common-image yxyl-common-105-image"><image class="image" :lazy-load="true" :src="item.image" mode="widthFix"></image></view>
				<view class="yxyl-common-105-text"><rich-text :nodes="title_nodes[index]" class="title"></rich-text></view>
			</view>
		</view>
		<view class="yxyl-common-106" v-if="type == 106" @tap="routeHandler(rowData[0].targetInfo)">
			<!-- 右图左字 -->
			<view class="yxyl-common-106-text">
				<rich-text :nodes="title_nodes[0]" class="title"></rich-text>
				<rich-text :nodes="remark_nodes[0]" class="remark"></rich-text>
			</view>
			<view class="yxyl-common-image yxyl-common-106-image"><image v-if="rowData[0]" :lazy-load="true" class="image" :src="rowData[0].image" mode="widthFix"></image></view>
		</view>
		
		
	</view>
</template>

<script>
import parseHtml from '@/util/html-parser.js';
import routeUtil from '@/util/routeUtil.js';
import yxylNav from '@/components/yxyl-nav/yxyl-nav.vue';
export default {
	components: { yxylNav },
	data() {
		return {};
	},
	props: {
		type: {
			type: Number,
			required: true
		},
		rowData: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	computed: {
		title_nodes: function() {
			var res = new Array();
			this.rowData.forEach((item, index) => {
				if (item.text1) {
					res.push(parseHtml(item.text1));
				}
			});
			return res;
		},
		remark_nodes: function() {
			var res = new Array();
			this.rowData.forEach((item, index) => {
				if (item.text2) {
					res.push(parseHtml(item.text2));
				}
			});
			return res;
		}
	},
	methods: {
		routeHandler(target) {
			routeUtil.routeHandler(target);
		},
		tapHandler() {
			this.$emit('exchange');
		}
	}
};
</script>

<style lang="scss" scoped>
.yxyl-common-container {
	width: 100%;
	display: flex;
	padding: 5px 0;
	.yxyl-common-image {
		width: 100%;
		display: flex;
		justify-content: center;
		.image {
			width: 100%;
			will-change: transform;
		}
	}
	// 左图右字-101 右图左字-106 左图右字 下面一堆乱七八糟-108
	.yxyl-common-101,
	.yxyl-common-106,
	.yxyl-common-108 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-height: 200rpx;
		.yxyl-common-101-image,
		.yxyl-common-106-image,
		.yxyl-common-108-image {
			flex-basis: 40%;
			flex-grow: 0;
			flex-shrink: 0;
		}
		.yxyl-common-101-text,
		.yxyl-common-106-text,
		.yxyl-common-108-text {
			height: 100%;
			display: flex;
			flex-basis: 58%;
			flex-grow: 0;
			flex-shrink: 0;
			flex-direction: column;
			justify-content: space-around;

			.title {
				font-size: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 2; /* 文本需要显示多少行 */
			}
			.remark {
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 1; /* 文本需要显示多少行 */
				 -webkit-box-align: end;
				 padding-right: 10rpx;
			}
		}
		.yxyl-common-106-text .remark {
			align-items: flex-start;
		}
		.yxyl-common-108-info {
			display: flex;
			justify-content: space-between;
			.yxyl-common-108-info-text-1 {
				font-size: 22rpx;
				color: #616161;
				padding: 10rpx 0;
				padding-left: 20rpx;
			}
			.yxyl-common-108-info-text-2 {
				font-size: 26rpx;
				color: #9e9e9e;
			}
			.yxyl-common-108-info-text-3 {
				font-size: 26rpx;
				color: $uni-color-main-dark;
			}
		}
	}
	//并排两图-105 并列两图 下面一堆乱七八糟-107
	.yxyl-common-105,
	.yxyl-common-107 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.yxyl-common-105-item,
		.yxyl-common-107-item {
			width: 48%;
			height: 100%;
			display: flex;
			flex-direction: column;
			.yxyl-common-105-image,
			.yxyl-common-107-image {
				width: 100%;
			}
			.yxyl-common-105-text,
			.yxyl-common-107-text {
				padding-top: 5rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 2; /* 文本需要显示多少行 */
			}
			.yxyl-common-107-info {
				display: flex;
				justify-content: space-between;
				.yxyl-common-107-info-text-1 {
					font-size: 22rpx;
					color: #616161;
					padding: 10rpx 0;
					padding-left: 20rpx;
				}
				.yxyl-common-107-info-text-2 {
					font-size: 26rpx;
					color: #9e9e9e;
				}
				.yxyl-common-107-info-text-3 {
					font-size: 26rpx;
					color: $uni-color-main-dark;
				}
			}
		}
	}
	//上图下字-单张大图-104
	.yxyl-common-104 {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.yxyl-common-104-text {
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
			display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 2; /* 文本需要显示多少行 */
		}
	}
	//通栏-102
	.yxyl-common-102 {
		width: 100%;
	}
	//标题-103
	.yxyl-common-103 {
		width: 100%;
		display: flex;
		.yxyl-common-103-text {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
		}
	}
	.yxyl-common-123 {
		width: 100%;
	}
	//视频
	.yxyl-common-109 {
		width: 100%;
		display: flex;
		flex-direction: column;
		.yxyl-common-109-image{
			width: 100%;
			.video{
				width: 100%;
			}
		}
	}
}
</style>
